<template>
 <div class="update">
    <div class="title">
      <h2>升级至专业版</h2>
    </div>
    <div class="boxbig">
    <div class="box">
     <h3 class="h4">游客用户</h3>
       <div class="b">
          <svg-icon icon-class="icon-cuo" style="margin-right:1rem;"></svg-icon>
       <h4>添加文件</h4>
       </div>
       <div class="b">
          <svg-icon icon-class="icon-cuo" style="margin-right:1rem;"></svg-icon>
       <h4>添加文件</h4>
       </div>
       <div class="b">
          <svg-icon icon-class="icon-cuo" style="margin-right:1rem;"></svg-icon>
       <h4>添加文件</h4>
       </div>
       <div class="b">
          <svg-icon icon-class="icon-cuo" style="margin-right:1rem;"></svg-icon>
       <h4>添加文件</h4>
       </div>
       <div class="b">
          <svg-icon icon-class="icon-cuo" style="margin-right:1rem;"></svg-icon>
       <h4>添加文件</h4>
       </div>
    </div>
    <div class="box">
     <h3 class="h4">普通注册用户</h3>
     <div class="b">
          <svg-icon icon-class="icon-dui" style="margin-right:1rem;"></svg-icon>
       <h4>添加文件</h4>
       </div>
       <div class="b">
          <svg-icon icon-class="icon-dui" style="margin-right:1rem;"></svg-icon>
       <h4>添加文件</h4>
       </div>
       <div class="b">
          <svg-icon icon-class="icon-dui" style="margin-right:1rem;"></svg-icon>
       <h4>添加文件</h4>
       </div>
       <div class="b">
          <svg-icon icon-class="icon-cuo" style="margin-right:1rem;"></svg-icon>
       <h4>添加文件</h4>
       </div>
       <div class="b">
          <svg-icon icon-class="icon-cuo" style="margin-right:1rem;"></svg-icon>
       <h4>添加文件</h4>
       </div>
    </div>
    <div class="box">
     <h3 class="h4">专业版用户</h3>
     <div class="b">
          <svg-icon icon-class="icon-dui" style="margin-right:1rem;"></svg-icon>
       <h4>添加文件</h4>
       </div>
       <div class="b">
          <svg-icon icon-class="icon-dui" style="margin-right:1rem;"></svg-icon>
       <h4>添加文件</h4>
       </div>
       <div class="b">
          <svg-icon icon-class="icon-dui" style="margin-right:1rem;"></svg-icon>
       <h4>添加文件</h4>
       </div>
       <div class="b">
          <svg-icon icon-class="icon-dui" style="margin-right:1rem;"></svg-icon>
       <h4>添加文件</h4>
       </div>
       <div class="b">
          <svg-icon icon-class="icon-dui" style="margin-right:1rem;"></svg-icon>
       <h4>添加文件</h4>
       </div>
    </div>
    </div>
  </div>

</template>

<style scoped>



.update {
  margin: 0 2rem;
}
.b{
   display: flex;
   margin-bottom: 1.5rem;
   margin-left: 2rem;
  text-align: center;
   
}
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 5rem;
}

.h4{
  margin-top: 2rem;
  margin-bottom: 5.5rem;
}
h2 {
  display: inline;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
}
.box1 {
  text-align: center;
  height: 10rem;
  padding: 4rem;
  border-radius: 16px;
  color: rgb(82, 82, 82);
  background-color: var(--BG);
}
.boxbig{
  
  display: flex;
  justify-content: space-between;
}
.box {
  
  text-align: center;
  height: 29rem;
  padding: 2rem;
  border-radius: 16px;
  color: rgb(82, 82, 82);
  background-color: var(--BG);
  width: 15rem;
  margin: 2rem;
  
}
.box:hover{
  box-shadow: 0 0 16px 0 rgba(173, 173, 173, 0.4) ;
}
</style>